<template>
  <div class="avatar-box" :style="{ width: size + 'px', height: size + 'px' }">
    <div v-if="sex" class="sex-icon" :class="{ male: sex == 1, female: sex == 2 }">
      <i class="el-icon-male" v-if="sex == 1"></i>
      <i class="el-icon-female" v-if="sex == 2"></i>
    </div>
    <el-avatar :src="avatarUrl || imgUrl + '/static/wxapp/avatar_default1.png'" :shape="shape" :size="size"></el-avatar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'UserAvatar',
  props: {
    avatarUrl: {
      type: String,
      default: '',
    },
    size: {
      type: Number,
      default: 60,
    },
    sex: {
      type: [Number, String],
      default: 0,
    },
    shape: {
      type: String,
      default: 'circle',
    },
  },
  data() {
    return {}
  },
  created() {},
  methods: {},
  watch: {},
  computed: {
    ...mapGetters({
      imgUrl: 'settings/imgUrl',
    }),
  },
}
</script>

<style lang="scss" scoped>
.avatar-box {
  position: relative;
  .sex-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    overflow: visible;
    i {
      color: #fff;
    }
  }
  .male {
    background: #69a4fd;
  }
  .female {
    background: pink;
  }
  .el-avatar {
    width: 60px;
    min-width: 60px;
    background: transparent;
  }
}
</style>
